<template>
    <div class="privateLetter">
        <router-link class="oneNotice"
            v-for="(chat,index) in chatList"
            :to="{
                path:`/chat-page/${chat.toUser}`,
                query:{
                    nickname:chat.nickname,
                    linkId:chat.linkId
                }
            }"
            :key="index"
        > 
            <div class="headPic">
                <van-image 
                    width="1.3rem"  
                    height="1.3rem" 
                    radius="100%"  
                    fit="cover"  
                    :src="chat.toUserImg" 
                />
            </div>
            <div class="detail">
                <div class="detailLeft">
                    <p>{{chat.nickname}}</p>
                    <p>{{chat.content}}</p>
                </div>
                <div class="detailRight">
                    <p>{{chat.sendTime}}</p>
                    <div v-if="chat.unread !== 0">
                        <!-- 这里显示未读的消息数量 -->
                        <van-badge :content="chat.unread" max="99" />
                    </div>
                </div>
            </div>
        </router-link>
        
    </div>
</template>

<script>
import axios from 'axios'
import jwtDecode from 'jwt-decode'

export default {
    name:'PrivateLetter',
    data() {
        return {
            decode:null,
            chatList:null,
        }
    },
    mounted(){
        //获取ws实例对象   this.global.ws
        //打开页面之后所有未读消息清零
        

        let token=sessionStorage.getItem("token")
        this.decode = jwtDecode(token);
        //获取用户聊天列表
        axios.get(`/chat/getChatList?fromUser=${this.decode.userId}`,{
            headers:{
                'Authentication-Token':JSON.parse(sessionStorage.getItem('token'))
            }
        })
        .then(data=>{
            console.log(data)
            if(data.data.code === 20000){ 
                this.chatList = data.data.token
            }
        }).catch(err=>{
            console.log(err)
        })
    }
}
</script>

<style lang="less" scoped>
    .goods-card {
        margin: 0;
        background-color: white;
    }

    .delete-button {
        height: 100%;
    }
    .oneNotice{
        display: flex;
        padding: 0.25rem;
        border-top: solid 1px #dbdbdb;
        .headPic{
            display: flex;
            align-items: center;
        }
        .detail{
            flex: 1;
            display: flex;
            .detailLeft{
                margin-left: 0.3rem;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                color: #3b3b3b;
                p{
                    font-size: 0.4rem;
                    &:nth-child(1){
                        color: black;
                    }
                    &:nth-child(2){
                        font-size: 0.3rem;
                    }
                }
            }
            .detailRight{
                display: flex;
                align-items: center;
                flex-direction: column;
                p{
                    color: #919191;
                }
                div{
                    flex: 1;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }

</style>